import { quick_func_float_staticNode } from './cla_quick_func_float_staticNode';
import { quick_func_float_eventBind } from './cla_quick_func_float_eventBind';
import { spacename_quick_func_float } from '../DataDefine/sourceData';
import { listenEvent_mana } from '../../../Classes/listenEvent_mana/Classes/cla_listenEvent_mana';
import { remove_class } from '../../../Func/remove_class';
import { css_ab_cur_posi_center, css_circle, css_disnone } from '../../../Css';
import { pack_all_child_node_from_to } from '../../../Func/pack_all_child_node_from_to';
import { appearEl_child_func_promise } from '../../../Func/appear_dom';
import { disappearEl_child_func_promise } from '../../../Func/disappear_dom';
import { delay } from '../../../Func/delay';
import { getElementViewOffsetPosi } from '../../../Func/getElementViewOffsetPosi';
import { listenCssVar_mana } from '../../../Classes/cla_listenCssVar_mana';
import {
  cssVar_ab_cur_posi_left,
  cssVar_ab_cur_posi_top,
} from '../../../Css/DataDefine/sourceData';
import {
  get_dom_v_drag_class,
  init_drag,
  remove_drag,
} from '../../../Func/drag_dom';

const quick_func_float_dataManaTag = 'quick_func_float_dataMana';

/**
 * 延迟 移除 圆 类
 */
const delay_remove_circle = 100;

export class quick_func_float_dataMana extends quick_func_float_staticNode {
  get [Symbol.toStringTag]() {
    return quick_func_float_dataManaTag;
  }

  constructor() {
    super();
  }

  /**
   * 事件 绑定 this
   */
  eventBind = new quick_func_float_eventBind();

  /**
   * 事件 监听管理
   */
  eventM = new listenEvent_mana(spacename_quick_func_float);

  /**
   * 指定 提汲容器 元素
   */
  targetEl: HTMLElement | undefined;

  /**
   * 给主体 元素 延迟 移除 圆形 结构
   */
  #dom_border_css_circle_remove() {
    setTimeout(() => {
      remove_class(this.dom_border, css_circle);
    }, delay_remove_circle);
  }

  /**
   * 给主体 元素 延迟 添加 圆形 结构
   */
  #dom_border_css_circle_add() {
    remove_class(this.dom_border, css_circle, true);
  }

  // /**
  //  * 获取 当前 的 提汲容器 id
  //  */
  // get_targetEl_id_for_quick_func_float() {
  //   return this.dom_border.getAttribute(prop_keyVal_quick_func_targetEl_id);
  // }

  /**
   * 将 提汲容器 中 的 元素 挂载到 container
   */
  async #packNode_targetEl_to_dom_container() {
    pack_all_child_node_from_to(
      this.targetEl as HTMLElement,
      this.dom_container
    );
  }

  /**
   * 将 container 中的 元素 归置 提汲容器
   */
  async #packNode_dom_container_to_targetEl() {
    pack_all_child_node_from_to(
      this.dom_container,
      this.targetEl as HTMLElement
    );
  }

  /**
   * 显示 容器 动画
   */
  async #open_container_func() {
    await appearEl_child_func_promise(this.dom_container);
  }

  /**
   * 关闭 容器 动画
   */
  async #cancel_container_func() {
    await disappearEl_child_func_promise(this.dom_container);

    remove_class(this.dom_container, css_disnone, true);
  }

  /**
   * @func noSingle 无 快速功能
   */

  /**
   * 无 快速功能 提示 显示动画
   */
  async #no_single_appear() {
    await appearEl_child_func_promise(this.dom_onSingle);
  }

  /**
   * 无 快速功能 提示 消失动画
   */
  async #no_single_disappear() {
    await disappearEl_child_func_promise(this.dom_onSingle);

    remove_class(this.dom_onSingle, css_disnone, true);
  }

  /**
   * @func icon 快速功能 图标
   */

  /**
   * 快速功能 图标 显示动画
   */
  async #icon_appear() {
    await appearEl_child_func_promise(this.dom_icon);
  }

  /**
   * 快速功能 图标 消失动画
   */
  async #icon_disappear() {
    await disappearEl_child_func_promise(this.dom_icon);

    // 应用 icon 图标消失
    remove_class(this.dom_icon, css_disnone, true);
  }

  /**
   * 元素 变换 为 中心 定位
   */
  active_cur_posi_center() {
    let { width, height, offsetTop, offsetLeft } = getElementViewOffsetPosi(
      this.dom_border
    );
    let cur_center_posi_top = offsetTop + height / 2;
    let cur_center_posi_left = offsetLeft + width / 2;

    let ab_center_posi_ob = new listenCssVar_mana(this.dom_border);

    ab_center_posi_ob.setCssVar(
      cssVar_ab_cur_posi_top,
      cur_center_posi_top + 'px'
    );

    ab_center_posi_ob.setCssVar(
      cssVar_ab_cur_posi_left,
      cur_center_posi_left + 'px'
    );
    remove_class(this.dom_border, css_ab_cur_posi_center, true);

    remove_class(this.dom_border, get_dom_v_drag_class(this.dom_border));
  }

  /**
   * 移除 元素 中心 定位
   */
  disavtive_cur_posi_center() {
    remove_class(this.dom_border, css_ab_cur_posi_center);
    remove_class(this.dom_border, get_dom_v_drag_class(this.dom_border), true);
  }

  /**
   * 启用 border dbclick
   */
  refreeze_dom_border_dbClick() {
    this.eventM.unfreeze(this.dom_border, 'dblclick');
  }

  /**
   * 禁用 border dbclick
   */
  freeze_dom_border_dbClick() {
    this.eventM.freeze(this.dom_border, 'dblclick');
  }

  /**
   * 禁用 window click
   */
  refreeze_window_click() {
    this.eventM.unfreeze(window as any, 'click');
  }

  /**
   * 禁用 window click
   */
  freeze_window_click() {
    this.eventM.freeze(window as any, 'click');
  }

  /**
   * 移除 移动 功能
   */
  remove_drag_func() {
    remove_drag(this.dom_border);
  }

  /**
   * 添加 移动 功能
   */
  init_drag_func() {
    init_drag(this.dom_border);
  }

  /**
   * 开启 浮动元素 系列操作
   */
  async open_view_container_func() {
    this.active_cur_posi_center();

    this.remove_drag_func();

    // 将元素 打包到 快速功能 视窗
    this.#packNode_targetEl_to_dom_container();

    await this.#icon_disappear();

    this.#dom_border_css_circle_remove();

    await this.#open_container_func();

    this.refreeze_window_click();

    this.disavtive_cur_posi_center();
  }

  /**
   * 关闭 浮动元素 系列操作
   */
  async cancel_view_container_func() {
    this.init_drag_func();

    this.active_cur_posi_center();

    this.#dom_border_css_circle_add();

    await this.#cancel_container_func();

    await this.#packNode_dom_container_to_targetEl();

    await this.#icon_appear();

    this.refreeze_dom_border_dbClick();

    this.disavtive_cur_posi_center();
  }

  /**
   * 在 没有 选定 快速功能 元素 时 显示 没有 提汲容器
   */
  async no_single_func() {
    this.active_cur_posi_center();

    this.remove_drag_func();

    await this.#icon_disappear();

    this.#dom_border_css_circle_remove();

    await this.#no_single_appear();

    await delay(1000);

    this.#dom_border_css_circle_add();

    await this.#no_single_disappear();

    await this.#icon_appear();

    this.refreeze_dom_border_dbClick();

    this.disavtive_cur_posi_center();

    this.init_drag_func();
  }
}
